{% extends "nav.html" %}
{% block little %}存储需求信息{% endblock %}
{% block content %}
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">
            <div class="page-title">
                <span class="title">网服需求</span>
                <div class="description">网服所有需求</div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-header">

                            <div class="card-title">
                                <div class="title">需求列表</div>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="datatable table table-striped table-hover" cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>需求时间</th>
                                    <th>需求部门</th>
                                    <th>需求人</th>
                                    <th>业务名称</th>
                                    <th>涉及存储</th>
                                    <th>需求说明</th>
                                    <th>容量</th>
                                    <th>容量说明</th>
                                    <th>完成时间</th>
                                    {% if perms.work %}
                                        <th>操作</th>
                                    {% endif %}
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>需求时间</th>
                                    <th>需求部门</th>
                                    <th>需求人</th>
                                    <th>业务名称</th>
                                    <th>涉及存储</th>
                                    <th>需求说明</th>
                                    <th>容量(T)</th>
                                    <th>容量说明</th>
                                    <th>完成时间</th>
                                    {% if perms.work %}
                                        <th>操作</th>
                                    {% endif %}
                                </tr>
                                </tfoot>
                                <tbody>
                                {% for i in data %}
                                    <tr>
                                        <td class="work_select" nid="{{ i.id }}">{{ i.id }}</td>
                                        <td class="work_select" nid="{{ i.id }}">{{ i.WO_time }}</td>
                                        <td class="work_select" nid="{{ i.id }}">{{ i.WO_department }}</td>
                                        <td class="work_select" nid="{{ i.id }}">{{ i.WO_people }}</td>
                                        <td class="work_select" nid="{{ i.id }}">{{ i.WO_textname }}</td>
                                        <td class="work_select" nid="{{ i.id }}">{{ i.WO_storage }}</td>
                                        <td class="work_select" nid="{{ i.id }}">{{ i.WO_text|slice:"10" }}</td>
                                        <td class="work_select" nid="{{ i.id }}">{{ i.WO_CAP }}</td>
                                        <td class="work_select" nid="{{ i.id }}">{{ i.WO_CAPname |slice:"10"}}</td>
                                        <td >{{ i.WO_fishtime }}</td>
                                        {% if perms.work %}
                                            <td><a type="button" nid="{{ i.id }}" class="btn btn-info btn-xs st_sel_update" style="margin: 0px 0px;top: 0px;" >编  辑</a></td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            {% if perms.work %}
                                <button type="button" class="btn btn-primary" id="update_xuqiu">添加需求</button>
                            {% endif %}
                        </div>



                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <div>
        <div class="modal fade bs-example-modal-lg work_motai" tabindex="-1">
            <div class="modal-dialog modal-lg" role="document" style="width: auto">
                <div class="modal-content">
                    <p id="work_show"></p>
                </div>
            </div>
        </div>
    </div>

    <div>
        <div class="modal fade work_edit"  role="dialog" aria-labelledby="gridSystemModalLabel" id="work_edit">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">修  改</h4>
                    </div>
                    <div class="modal-body ">
                        <div class="row">
                            <div>
                                <div class="col-md-4"><h5>基本需求：</h5></div>
                                <div class="col-md-4"><h5>需求部门：</h5></div>
                                <div class="col-md-4"><h5>负责人：</h5></div>
                            </div>
                            <div>
                                <div class="col-md-4"><input type="text" class="form-control WO_time" id="xuqiushijian" placeholder="需求时间"></div>
                                <div class="col-md-4 "><input type="text" class="form-control" id="WO_department" placeholder="需求部门"></div>
                                <div class="col-md-4 "><input type="text" class="form-control" id="WO_people" placeholder="负责人"></div>
                            </div>
                        </div>
                        <div class="row ">
                            <div>
                                <div class="col-md-4"><h5>存储IP：</h5></div>
                                <div class="col-md-4"><h5>容量(T)：</h5></div>
                                <div class="col-md-4"><h5>容量说明：</h5></div>
                            </div>
                            <div>
                                <div class="col-md-4 "><input type="text" class="form-control" id="WO_storage" placeholder="存储"  id="nid"></div>
                                <div class="col-md-4 ">
                                    <input type="text" class="form-control" id="WO_CAP" placeholder="容量">
                                </div>





                                <div class="col-md-4 "><input type="text" class="form-control" id="WO_CAPname" placeholder="容量说明"></div>
                            </div>
                        </div>
                        <div class="row page-header">
                            <div>
                                <div class="col-md-8 "><h5>业务名称：</h5></div>
                                <div class="col-md-4"><h5>结束时间：</h5></div>
                            </div>
                            <div>
                                <div class="col-md-8 "><input type="text" class="form-control" id="WO_textname" placeholder="业务名称"></div>
                                <div class="col-md-4 "><input type="text" class="form-control" id="jiesushijian" placeholder="结束时间"></div>
                            </div>
                        </div>
                        <div class="row ">
                            <div style="margin-left: 15px"><h5>需求说明：</h5></div>
                            <div class="col-md-12"><input type="text" class="form-control" id="WO_text" placeholder="需求说明"></div>
                        </div>
                        <div class="row" id="xiangxishuoming">
                            <div style="margin-left: 15px"><h5>详细说明：</h5></div>
                            <div class="col-md-12">
                                <textarea id="editor_id" name="content" style="width:auto;height:200px;"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关  闭</button>
                        <button type="button" class="btn btn-primary" id="work_save">保  存</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
    <script charset="utf-8" src="/static/js/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="/static/js/lang/zh-CN.js"></script>
    <script charset="utf-8" src="/static/js/laydate/laydate.js"></script>
    <script>
        var editor;
        KindEditor.ready(function(K) {
            window.editor = K.create('#editor_id');
        });
        laydate.render({
            elem: '#xuqiushijian' //指定元素
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#jiesushijian' //指定元素
            ,type: 'datetime'
        });
    </script>
    <script>
        $(".st_sel_update") .click(function () {
            $("#work_edit").modal({backdrop: 'static', keyboard: false},'toggle')
            $("#gridSystemModalLabel").text("修改中")
            var id = $(this).attr("nid")
            $("#xiangxishuoming").addClass("hide")
            $.ajax({
                url: "{% url "work_upadte_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    {#                    var obj = data;#}
                    if(obj.status){
                        $("#xuqiushijian").val(obj.WO_time)
                        $("#WO_department").val(obj.WO_department)
                        $("#WO_text").val(obj.WO_text)
                        $("#WO_CAP").val(obj.WO_CAP)
                        $("#WO_CAPname").val(obj.WO_CAPname)
                        $("#WO_textname").val(obj.WO_textname)
                        $("#WO_people").val(obj.WO_people)
                        $("#WO_storage").val(obj.WO_storage)
                        $("#jiesushijian").val(obj.WO_fishtime)
                        $("#gridSystemModalLabel").attr("nid",obj.id)
                        $("#WO_storage").removeClass("hide")
                        {#                        $("#editor_id").val(obj.WO_note)#}
                    }else{
                    };
                }
            });
        });
        $("#update_xuqiu").click(function () {
            $("#work_edit").modal({backdrop: 'static', keyboard: false},'toggle')
            $("#gridSystemModalLabel").text("添加信息")
            $("#xuqiushijian").val("")
            $("#WO_department").val("")
            $("#WO_text").val("")
            $("#WO_CAP").val("")
            $("#WO_CAPname").val("")
            $("#WO_textname").val("")
            $("#WO_people").val("")
            $("#WO_storage").val("")
            $("#jiesushijian").val("")
            $("#editor_id").removeClass("hide")
        });

        $(".work_select").click(function () {
            $(".work_motai").modal( 'toggle')
            var nid = $(this).attr("nid")
            $.ajax({
                url: "{% url "work_work_ajax" %}",
                type: 'POST',
                data:{"id":nid},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#work_show").html(obj.data)
                        $("#work_show").children().addClass("table table-bordered table-condensed")
                    }else{
                        $("#storge_err").text("更新失败：" + obj.error);
                        $("storage_jindutiao").hide();
                        $("#storage_close").show();
                    };
                }
            });
        });
        $("#work_save").click(function () {
            var nid = $("#gridSystemModalLabel").attr("nid")
            var data = {
                id:nid,
                xuqiushijian:$("#xuqiushijian").val(),
                WO_storage:$("#WO_storage").val(),
                WO_department:$("#WO_department").val(),
                WO_text:$("#WO_text").val(),
                WO_CAP:$("#WO_CAP").val(),
                WO_CAPname:$("#WO_CAPname").val(),
                WO_textname:$("#WO_textname").val(),
                WO_people:$("#WO_people").val(),
                jiesushijian:$("#jiesushijian").val(),
                editor_id:$("#editor_id").val()
            }
            $.ajax({
                url: "{% url "work_modfiy" %}",
                type: 'POST',
                data:data,
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        alert("添加或者修改成功")
                        location.reload();
                    }else{
                        alert("添加错误")
                    };
                }
            });
        });
    </script>

{% endblock %}
